<!--
 * @Author: hu_binbin
 * @Date: 2021-06-24 16:15:29
 * @LastEditTime: 2021-07-30 09:10:52
 * @Description: 选择设备
-->

<template>
    <div class="selectSubstation">
        <van-nav-bar class="subClass" left-text="取消" right-text="确认" title="选择设备" @click-left="back"  @click-right="selDeviceBtn"></van-nav-bar>
        </van-nav-bar>
      <van-search v-model.trim="selName"  clearable  @input="focus" @clear="cancel" shape="round" background="#fff" placeholder="请输入搜索内容">
        </van-search>
      
        <div class="selDevice">
            <van-cell
            v-for="(item,index) in showDeviceList"
            clickable
            :key="index"            
            >
                <div slot="title" style="display: flex;justify-content: space-between;">
                    <span>{{ item.deviceName }}</span>
                    <van-checkbox style="display: inline;" @click="selCheck(item,index)" v-model="item.check" checked-color="#057b54"/>
                </div>
            </van-cell>
            <van-cell v-if="showDeviceList.length==0" style="text-align: center;" title="无数据"></van-cell>
        </div>
    </div>
  </template>
  
  <script>
  import {getDeviceAndBayForApp} from "../modules/tour/api/common"
  const PinyinEngine = require('pinyin-engine');
  export default {
    name: 'SelDevice',
    props: {
      subId: {
        type: String,
        default: ""
      },
      single:{//单选、多选
        type:Boolean,
        default: false
      }
    },
    data () {
      return {
        selName: "",//设备名称
        showDeviceList:[],
        userInfo:{},
        pinyinEngineByShow: null,
      }
    },
    computed: {
      
    },
    methods: {
        //关闭组件
        back() {
            this.$emit("closeDevicePage")
        },
        //选择设备类型名称
        selDeviceBtn() {
            var device = [];
            this.showDeviceList.map(item => {
                if(item.check) {
                    device.push(item)
                }
            })
            if(device.length == 0) {
              this.$Toast("请选择设备")
              return;
            } 
            console.log("设备类型",device)
            this.$emit("comfirmDevice",device)
        },
        /**
         * @description: 搜索设备名称
         * @param {*}
         * @return {*}
         */
        focus() {
          this.showDeviceList = this.pinyinEngineByShow.query(this.selName);
          // this.showDeviceList = [];
          // this.deviceList.map(item => {
          //     if(item.deviceName.indexOf(this.selName) != -1) {
          //       this.showDeviceList.push(item)
          //     }
          // })
        },
        /**
         * @description:清除 
         * @param {*}
         * @return {*}
         */
        cancel() {
            this.showDeviceList = this.pinyinEngineByShow.query("");
            //this.showDeviceList = this.deviceList;
        },
        /**
         * @description: 获取设备
         */ 
         getDeviceAndBayForApp() {
            var self = this,deviceList=[];
            var params = {
                keyword: this.selName,//人员名称
                roleCode: "",
                substationId: this.subId,
                userId: this.userInfo.userId,
            };
            this.$toast.loading({
                duration: 0,//展示时长 0不会消失
                message: "加载设备列表...",
                forbidClick: true,//是否禁止背景点击
                overlay: true//是否显示背景遮罩层
            })
		    console.log("params",params)
            getDeviceAndBayForApp(params).then(data => {
                self.$Toast.clear();
                if(data.success) {
                    self.$Toast.success(data.msg)
                    var selDevice = data.data;
                    if(selDevice && selDevice.length > 0) {
                        for (let i = 0; i < selDevice.length; i++) {
                            for (let j = 0; j < selDevice[i].deviceList.length; j++) {
                                selDevice[i].deviceList[j]["check"] = false;
                                deviceList.push(selDevice[i].deviceList[j])
                            }
                        }
                        self.pinyinEngineByShow = new PinyinEngine(deviceList, ["deviceId","deviceName"])
                        self.showDeviceList = deviceList;
                    }else{
                        self.showDeviceList =[]
                    }
                }else{
                    self.$Toast.fail(data.msg)
                }
            }).catch(err => {
                self.$Toast.fail(err)
            })
        },
        /**
         * @description: 
         * @param {*}
         * @return {*}
         */
        selCheck(item,index) {
          if(this.single) {//单选
            if(item.check) {
              this.showDeviceList.forEach(user => {
                user.check = false;
              })
              item.check = true;
            }else{
              this.showDeviceList.forEach(user => {
                user.check = false;
              })
            }
          }
        }
    }, 
    watch: {
 
    }, 
    mounted() {
      var userInfo = localStorage.getItem("userInfo");
	    this.userInfo = JSON.parse(userInfo);
      this.getDeviceAndBayForApp()
    }
  }
  </script>
  
  <style scoped>
  .selectSubstation {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .tabList {
    width:100%;
    height:90%;
    overflow-y:auto;
  }
  .van-nav-bar {
    z-index: 10;
    background: linear-gradient(to right, #036257, #057b54);
  }
  /deep/ .van-nav-bar__title {
    color: #fff !important;
    font-size: 20px !important;
  }
  /deep/ .van-nav-bar__text, .van-nav-bar .van-icon {
    color: #fff !important;
    font-size: 16px !important;
  }
  .selDevice{
    height: calc(100% - 120px);
    overflow-y: auto;
  }
  </style>
  
